<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, inital-scale=1.0,maximum-scale=1.0,user-scalable=no "/>
    <title>德蒙斯特线上商城</title>
    <link rel="shortcut icon" href="images/favicon.ico"/>

    <!-- Bootstrap -->
    <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}"
          href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/css/style.css}" href="/static/css/style.css" rel="stylesheet">
    <link th:href="@{/css/response.css}" href="/static/css/response.css" rel="stylesheet">
    <link th:href="@{/css/product.css}" href="/static/css/product.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--隐藏的值-->
<input type="hidden" id="productId" th:value="${product.productId}">
<input type="hidden" id="barCode" th:value="${product.barCode}">
<input type="hidden" id="productTitle" th:value="${product.productName}">
<input type="hidden" id="productDesc" th:value="给您的孩子五星级的呵护">
<input type="hidden" id="productImag" th:value="'http://file.demengsite.cn/'+${product.productImag}">
<!--隐藏值结束-->
<div class="maincont">
    <header>
        <a href="javascript:history.back(-1)" class="back-off fl"><span
                class="glyphicon glyphicon-menu-left"></span></a>
        <div class="head-mid">
            <!--/*@thymesVar id="product" type="red.lixiang.model.Product"*/-->
            <h1 th:text="${product.productName}">产品详情</h1>
        </div>
        <a href="/" class="head-index">首页</a>
    </header>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="" data-slide-to="0" class="active"></li>
            <li data-target="" data-slide-to="1"></li>
            <li data-target="" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div th:each="item,itemStatus:${mainImages}"   th:class=" ${itemStatus.index==1}?'active item':'item'">
                <img  th:src="'http://file.demengsite.cn/'+${item.attrUrl}">
                <div class="carousel-caption">
                    LightBlue
                </div>
            </div>
        </div>

    </div>
    <!--<div id="sliderA" class="slider">-->
        <!--<img-->
             <!--src="/images/image1.jpg"/>-->
    <!--</div>&lt;!&ndash;sliderA/&ndash;&gt;-->
    <table class="jia-len">
        <tr>
            <th><strong th:text="${product.salePrice}" class="orange">${product.salePrice}</strong></th>

        </tr>
        <tr>
            <td>
                <strong th:text="${product.productName}">三级分销农庄有机毛豆500g</strong>
                <p class="hui" th:text="'品质加爱,给您的孩子最好的呵护'">富含纤维素，平衡每日膳食</p>
            </td>
            <td align="right">
                <a href="javascript:;" class="shoucang"><span class="glyphicon glyphicon-star-empty"></span></a>
            </td>
        </tr>
    </table>
    <div class="height2"></div>
    <h3 class="proTitle">颜色</h3>
    <ul class="guige" id="colorUl">
        <!--/*@thymesVar id="proAttributes" type="red.lixiang.model.ProductAttribute"*/-->
        <li class="guigeCur" data-name="attribute" data-type="0" th:data="${attr.colorCode}"
            th:class="${attr.isSelect == 0 ? '':'guigeCur'}" th:each="attr,attrState:${colorAttribute}"><a
                href="javascript:;" th:text="${attr.colorName}">50ML</a></li>
    </ul><!--guige/-->
    <div class="clearfix"></div>

    <h3 class="proTitle">尺码</h3>
    <ul class="guige" id="sizeUl">
        <li class="guigeCur" data-name="attribute" data-type="1" th:data="${attr.sizeCode}"
            th:class="${attr.isSelect == 0 ? '':'guigeCur'}" th:each="attr,attrState:${sizeAttribute}"><a
                href="javascript:;" th:text="${attr.sizeName}">50ML</a></li>
    </ul><!--guige/-->
    <div class="clearfix"></div>

    <div class="height2"></div>
    <div class="zhaieq">
        <a href="javascript:;" class="zhaiCur">商品简介</a>
        <a href="javascript:;">商品参数</a>
        <a href="javascript:;" style="background:none;">订购列表</a>
        <div class="clearfix"></div>
    </div><!--zhaieq/-->
    <div class="proinfoList">
        <img th:each="item,itemStatus:${descImages}" th:src="'http://file.demengsite.cn/'+${item.attrUrl}" src="" />
    </div><!--proinfoList/-->
    <div class="proinfoList">
        暂无信息....
    </div><!--proinfoList/-->
    <div class="proinfoList">
        暂无信息......
    </div><!--proinfoList/-->
    <div class="addToCart">
        <a href="javascript:;" class="btn btn-danger" id="addToCart">加入购物车</a>
        <a href="/cart/showCart" class="btn btn-success">查看购物车</a>
    </div>

</div><!--maincont-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>-->
<!-- Latest compiled and minified JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/js/style.js"></script>
<!--焦点轮换-->
<script src="/js/jquery.excoloSlider.js"></script>
<script>
    $(function () {
        $("#sliderA").excoloSlider({

        });
    });
</script>
<!--jq加减-->
<script src="/js/jquery.spinner.js"></script>
<script th:src="@{/js/product.js}" src="/static/js/product.js"></script>
<script>
    $('.spinnerExample').spinner({});
</script>
</body>
</html>